<template>
  <div class="shark-box">
    <div v-if="!props.src && !props.text">
      {{ '未传入内容（请传入text或者src）' }}
    </div>
    <div v-else-if="props.text && !props.src">
      {{ props.text }}
    </div>
    <!-- 针对不规则图形，增加 -webkit-mask 配置 -->
    <div class="shark-img card" v-else-if="props.src" :style="imgStyle">
      <img :src="props.src" alt="未找到图片" />
    </div>
  </div>
</template>

<script setup>
import { defineProps, computed } from 'vue'

const props = defineProps({
  text: {
    type: String,
    default: ''
  },
  src: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '300'
  },
  height: {
    type: String,
    default: '200'
  }
})

const imgStyle = computed(() => {
  let initStyle = {
    width: props.width,
    height: props.height
  }
  let pngStyle = {
    mask: `url(${props.src}) no-repeat center / cover`,
    '-webkit-mask': `url(${props.src}) no-repeat center / cover`
  }
  if (props.src.includes('png')) {
    initStyle = { ...initStyle, ...pngStyle }
  }

  return initStyle
})
</script>

<style lang="less" scoped>
.shark-box {
  /* 文字样式 */
  font-size: 60px;
  font-weight: normal;
  /* 扫光样式-文字 */
  -webkit-text-fill-color: transparent;
  background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0.7),
      rgba(255, 255, 255, 0) 60%
    ) -100% / 50% no-repeat currentColor;
  -webkit-background-clip: text;
  animation: shark-box 2s infinite;
}

/* 文字 */
@keyframes shark-box {
  from {
    background-position: -100%;
  }
  to {
    background-position: 200%;
  }
}

/* 图片扫光样式 */
.card {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    display: block;
    border-radius: 6px;
  }
}
/* 伪元素实现图片扫光 */
.shark-img {
  //定位图片，超出隐藏
  position: relative;
  overflow: hidden;
  img {
    object-fit: cover;
  }
  &::after {
    content: '';
    position: absolute;
    inset: -20%;
    background: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0) 40%,
      rgba(255, 255, 255, 0.7),
      rgba(255, 255, 255, 0) 60%
    );
    animation: shark-img 2s infinite;
    transform: translateX(-100%);
  }
}

/* 图片 */
@keyframes shark-img {
  to {
    transform: translateX(100%);
  }
}
</style>
